<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <div class="box">
        <p>段落</p>
    </div>
    <input type="button" value="按钮" class="btn">
</body>
<script src="./jquery.js"></script>
<script>
    
    // console.log($("<span>"))

    // 创建jq的DOM对象
    // const span = $("<span>");
    // const span = $("<span>这是span的文字</span>");
    // const span = $("<span>").html("span的文字");

    // 插入到指定父元素的最后一个子
    // 选择父元素，插入子元素
    // $(".box").append(span);
    // 将子元素插入到父元素
    // span.appendTo($(".box"))

    // 插入到指定父元素的第一个子
    // $(".box").prepend(span);
    // span.prependTo($(".box"));

    // 插入到指定元素之前
    // $(".box").before(span);
    // 插入到指定元素之后
    // $(".box").after(span);


    // 删除自身
    // $(".box").remove();
    // 删除所有子
    // $(".box").empty();

    // 改元素（了解）
    // $(".box").replaceWith("<span class='"+$(".box").attr("class")+"'>"+ $(".box").html() +"</span>");


    // jq的事件绑定
    $(".btn").click(function(){
        console.log(1);
    })
    // 克隆，类似于创建元素，需要插入到指定位置
    $(".btn").clone(true).appendTo($("body"));

</script>
</html>